<script setup>
import { onMounted, onUnmounted, ref, nextTick } from 'vue'
import * as echarts from 'echarts'

/**
 * 初始化饼图的函数
 * 负责创建、配置饼图，并处理图表的响应式和资源清理
 * @returns {Function} 清理函数，用于移除事件监听和销毁图表实例
 */
const initPieChart = () => {
  // 获取页面中id为'pie-chart'的DOM元素，作为图表的容器
  const chartDom = document.getElementById('pie-chart')
  // 如果容器元素不存在，则直接返回，避免后续错误
  if (!chartDom) return
  
  // 初始化ECharts实例，将图表绑定到获取到的DOM元素上
  const myChart = echarts.init(chartDom)
  
  // 图表的配置项，包含图表的各种样式和数据设置
  const option = {
    // 提示框配置
    tooltip: {
      trigger: 'item', // 触发类型：item表示点击或 hover 到饼图的扇区时触发
      formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框内容格式：系列名 + 名称 + 数值 + 百分比
    },

    // 系列数据配置（饼图的核心数据和样式）
    series: [
      {
        name: '平台占比', // 系列名称，用于tooltip的{a}占位符
        type: 'pie', // 图表类型：饼图
        radius: ['60%', '50%'], // 饼图半径，数组表示内半径和外半径，实现环形图效果
        center: ['35%', '50%'], // 饼图中心位置，相对于容器的百分比
        avoidLabelOverlap: false, // 是否避免标签重叠（关闭以自定义标签位置）
        itemStyle: {
          borderColor: '#06343e', // 扇区边框颜色
          borderWidth: 0 // 扇区边框宽度
        },
        label: { // 扇区标签配置（显示在饼图外部的文字）
          show: true, // 是否显示标签
          position: 'outside', // 标签位置：外部
          formatter: '{d}%', // 标签内容格式：百分比
          color: '#fff', // 标签文字颜色
          fontSize: 14, // 标签文字大小
          fontWeight: 'bold', // 标签文字粗细
          textBorderColor: 'rgba(0,0,0,0.5)', // 文字描边颜色
          textBorderWidth: 0, // 文字描边宽度
          distanceToLabelLine: 1, // 标签与连接线的距离
          distance: 0 // 标签与扇区边缘的距离
        },
        emphasis: { // 高亮状态配置（鼠标hover时的样式）
          label: {
            show: true, // 高亮时显示标签
            fontSize: 14, // 高亮时文字大小
            fontWeight: 'bold', // 高亮时文字粗细
            color: '#fff' // 高亮时文字颜色
          }
        },
        labelLine: { // 标签连接线配置
          show: false // 不显示连接线
        },
        data: [ // 饼图数据
          { value: 33, name: '微信', itemStyle: { color: '#04bc5d' } }, // 微信占比33%，绿色
          { value: 31, name: '抖音', itemStyle: { color: '#47fcfe' } }, // 抖音占比31%，青色
          { value: 26, name: '微博', itemStyle: { color: '#f61620' } }, // 微博占比26%，红色
          { value: 10, name: '其他', itemStyle: { color: '#f59a23' } }  // 其他占比10%，橙色
        ]
      }
    ]
  }
  
  // 将配置项应用到图表实例，渲染图表
  myChart.setOption(option)
  
  // 响应式调整函数：当窗口大小变化时，调整图表尺寸
  const handleResize = () => {
    myChart.resize()
  }
  
  // 给窗口添加resize事件监听，实现图表响应式
  window.addEventListener('resize', handleResize)
  
  // 返回一个清理函数，用于组件卸载时释放资源
  return () => {
    // 移除窗口resize事件监听，避免内存泄漏
    window.removeEventListener('resize', handleResize)
    // 销毁图表实例，释放DOM和内存资源
    myChart.dispose()
  }
}

// 轮播表数据
const tableHeaders = ['内容', '平台', '时间', '错误舆情', '正确舆情']
const tableData = [
  ['此处是一条内容1', '其他', '2024-10-12', '未受理', '5'],
  ['此处是一条内容2', '微信', '2023-10-12', '未受理', '99'],
  ['此处是一条内容3', '抖音', '2022-10-12', '未受理', '99'],
  ['此处是一条内容4', '微博', '2024-10-12', '未受理', '99'],
  ['此处是一条内容5', '其他2', '2024-10-12', '未受理', '5'],
  ['此处是一条内容6', '微信2', '2023-10-12', '未受理', '99'],
  ['此处是一条内容7', '抖音2', '2022-10-12', '未受理', '99'],
  ['此处是一条内容8', '微博2', '2024-10-12', '未受理', '99']
]

// 轮播表逻辑
const visibleData = ref([])
const currentStartIndex = ref(0)
const tableBody = ref(null)
let carouselInterval = null

// 初始化可见数据
const initVisibleData = () => {
  visibleData.value = [...tableData.slice(0, 5)]
}

// 轮播函数
const startCarousel = () => {
  carouselInterval = setInterval(() => {
    currentStartIndex.value = (currentStartIndex.value + 1) % tableData.length
    
    // 更新可见数据
    const newData = []
    for (let i = 0; i < 5; i++) {
      const dataIndex = (currentStartIndex.value + i) % tableData.length
      newData.push(tableData[dataIndex])
    }
    visibleData.value = newData
  }, 2000)
}

onMounted(() => {
  const cleanup = initPieChart()
  
  // 初始化轮播表
  initVisibleData()
  nextTick(() => {
    startCarousel()
  })
  
  onUnmounted(() => {
    if (cleanup) cleanup()
    if (carouselInterval) {
      clearInterval(carouselInterval)
    }
  })
})
</script>

<template>
  <div class="box">
    <div class="box-one">
      <dv-border-box-8 style="width: 100%;height: 100%;padding: 5px;">
        <div class="title-section">
        <h2 class="title">政务新媒体发布数量统计</h2>
      </div>
      <div class="pie-container">
        <div class="pie-chart">
          <div id="pie-chart" style="width: 100%; height: 100%;"></div>
          <div class="pie-center-image">
            <img src="../../../public/two8.png" alt="饼图中心图标" class="center-icon"  />
          </div>
          <div class="legend-list">
            <div class="list-row">
              <div class="list-item">
                <div class="color-block" style="background-color: #04bc5d;"></div>
                <span class="item-text">微信 33%</span>
              </div>
              <div class="list-item">
                <div class="color-block" style="background-color: #47fcfe;"></div>
                <span class="item-text">抖音 31%</span>
              </div>
            </div>
            <div class="list-row">
              <div class="list-item">
                <div class="color-block" style="background-color: #f61620;"></div>
                <span class="item-text">微博 26%</span>
              </div>
              <div class="list-item">
                <div class="color-block" style="background-color: #f59a23;"></div>
                <span class="item-text">其他 10%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="stats-table">
          <div class="stats-item">
            <span class="stats-label">抖音平台发布量：</span>
            <span class="stats-value">123456789</span>
          </div>
          <div class="stats-item">
            <span class="stats-label">微信平台发布量：</span>
            <span class="stats-value">123456789</span>
          </div>
          <div class="stats-item">
            <span class="stats-label">微博平台发布量：</span>
            <span class="stats-value">12345678</span>
          </div>
          <div class="stats-item">
            <span class="stats-label">其他平台发布量：</span>
            <span class="stats-value">123456</span>
          </div>
        </div>
      </div>
      </dv-border-box-8>
      
    </div>
    <div class="box-two">
      <dv-border-box-8 style="width: 100%;height: 100%;padding: 5px;">
      <div class="title-section">
        <h2 class="title" style="padding: 10px 0;">问题来源分布</h2>
      </div>
      <div class="content-container">
        <div class="left-graphic">
          <div class="graphic-center">
            <div class="center-diamond"></div>
          </div>
          <div class="text-top">微信</div>
          <div class="text-right">微博</div>
          <div class="text-bottom">其他</div>
          <div class="text-left">抖音</div>
        </div>
        <div class="right-module">
          <div class="data-item">
            <div class="item-icon">📊</div>
            <div class="item-content">
              <div class="item-label">发布总量</div>
              <div class="item-value">1234567</div>
            </div>
          </div>
          <div class="data-item">
            <div class="item-icon">⚠️</div>
            <div class="item-content">
              <div class="item-label">一般错误</div>
              <div class="item-value">1234567</div>
            </div>
          </div>
          <div class="data-item">
            <div class="item-icon">📊</div>
            <div class="item-content">
              <div class="item-label">发布总量</div>
              <div class="item-value">1234567</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-8>
        
    </div>
    <div class="box-three">
      <dv-border-box-8 style="width: 100%;height: 100%;padding: 5px;">
        <div class="carousel-container">
          <h2 class="carousel-title">政务新媒体错误监测</h2>
          <div class="carousel-table">
            <div class="table-header">
              <div class="header-cell" v-for="header in tableHeaders" :key="header">{{ header }}</div>
            </div>
            <div class="table-body" ref="tableBody">
              <div 
                class="table-row" 
                v-for="(row, index) in visibleData" 
                :key="row[0] + index"
                :class="{ 'odd-row': (currentStartIndex + index) % 2 === 0, 'even-row': (currentStartIndex + index) % 2 === 1 }"
              >
                <div class="cell content-cell">{{ row[0] }}</div>
                <div class="cell platform-cell">{{ row[1] }}</div>
                <div class="cell time-cell">{{ row[2] }}</div>
                <div class="cell error-cell">{{ row[3] }}</div>
                <div class="cell correct-cell">{{ row[4] }}</div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.box{
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: #000;
  .box-one{
    width: 100%;
    height: 390px;
    display: flex;
    flex-direction: column;
    padding: 5px 10px 5px 10px;
    margin-bottom: 0;
    box-sizing: border-box;
    
    .title-section {
      flex-shrink: 0;
      padding: 0 15px;
      margin-bottom: 30px;
      
      .title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        margin: 0;
        padding: 10px 0;
      }
    }
    
    .pie-container {
      flex: 1;
      display: flex;
      width: 100%;
      min-height: 0;
      gap: 20px;
      overflow: hidden;
      
      .pie-chart {
        flex: 1;
        min-width: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        // margin-left: 10px;
        #pie-chart {
          flex: 1;
          min-height: 0;
        }
        
        .pie-center-image {
          position: absolute;
          top: 38%;
          left: 35%;
          transform: translate(-50%, -50%);
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          // border: 2px solid rgba(255, 255, 255, 0.3);
          
          .center-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 4px;
          }
        }
        
        .legend-list {
          flex-shrink: 0;
          margin-top: 15px;
          padding: 0 10px;
          
          .list-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            
            .list-item {
              display: flex;
              align-items: center;
              width: 48%;
              
              .color-block {
                width: 14px;
                height: 14px;
                border-radius: 3px;
                margin-right: 8px;
              }
              
              .item-text {
                color: #fff;
                font-size: 13px;
                font-weight: 500;
              }
            }
          }
        }
      }
      
      .stats-table {
        margin-top: 40px;
        width: 240px;
        flex-shrink: 0;
        background: #06343e;
        border-radius: 8px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 200px;
        .stats-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          
          .stats-label {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
          }
          
          .stats-value {
            color: #00c18d;
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
    }
    

  }
  
  .box-two{
    width: 100%;
    height: 360px;
    padding: 4px 12px 8px 12px;
    margin-top: 0;
    box-sizing: border-box;
    
    .title-section {
      padding: 0 10px;
      margin-bottom: 20px;
      
      .title {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        margin: 0;
        padding: 15px 0;
      }
    }
    
    .content-container {
      display: flex;
      height: calc(100% - 60px);
      gap: 20px;
      width: 100%;
      overflow: hidden;
      
      .left-graphic {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #06343e 0%, #0a4a5a 50%, #06343e 100%);
        border-radius: 8px;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
          pointer-events: none;
        }
        
        .graphic-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          
          .center-diamond {
            width: 80px;
            height: 80px;
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.8);
            transform: rotate(45deg);
            position: relative;
            
            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 60px;
              height: 60px;
              border: 2px solid rgba(255, 255, 255, 0.6);
              transform: translate(-50%, -50%) rotate(45deg);
            }
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40px;
              height: 40px;
              border: 1px solid rgba(255, 255, 255, 0.4);
              transform: translate(-50%, -50%) rotate(45deg);
            }
          }
        }
        
        .text-top, .text-right, .text-bottom, .text-left {
          position: absolute;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          z-index: 2;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .text-top {
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .text-right {
          right: 8px;
          top: 50%;
          transform: translateY(-50%);
        }
        
        .text-bottom {
          bottom: 8px;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .text-left {
          left: 8px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      
      .right-module {
        flex: 1;
        background: #093d46;
        border-radius: 8px;
        padding: 25px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        
        .data-item {
          display: flex;
          align-items: center;
          gap: 20px;
          height: 60px;
          
          .item-icon {
            width: auto;
            height: 100%;
            min-width: 60px;
            max-width: 80px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
          }
          
          .item-content {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
            .item-label {
              color: #fff;
              font-size: 16px;
              font-weight: 500;
              margin-bottom: 4px;
            }
            
            .item-value {
              font-size: 22px;
              font-weight: bold;
              line-height: 1.2;
            }
          }
        }
        
        .data-item:nth-child(1) .item-value {
          color: #00a477;
        }
        
        .data-item:nth-child(2) .item-value {
          color: #f59a23;
        }
        
        .data-item:nth-child(3) .item-value {
          color: #a30014;
        }
      }
    }
  }
  
  .box-three{
    width: 100%;
    height: 185px;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    
    .carousel-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      
      .carousel-title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        margin: 0 0 8px 0;
        padding: 5px 8px;
      }
      
      .carousel-table {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        
        .table-header {
          display: flex;
          background: #094c6b;
          border-radius: 3px 3px 0 0;
          
          .header-cell {
            flex: 1;
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            padding: 6px 3px;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            
            &:last-child {
              border-right: none;
            }
          }
        }
        
        .table-body {
          flex: 1;
          overflow: hidden;
          
          .table-row {
            display: flex;
            height: 26px;
            
            &.odd-row {
              background: #0d3743;
            }
            
            &.even-row {
              background: #071f2a;
            }
            
            .cell {
              flex: 1;
              font-size: 11px;
              padding: 3px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-right: 1px solid rgba(255, 255, 255, 0.03);
              
              &:last-child {
                border-right: none;
              }
              
              &.content-cell {
                color: #01e2e3;
                justify-content: flex-start;
                padding-left: 6px;
              }
              
              &.platform-cell {
                color: #fff;
              }
              
              &.time-cell {
                color: #fff;
              }
              
              &.error-cell {
                color: #c2707d;
              }
              
              &.correct-cell {
                color: #c2707d;
              }
            }
          }
        }
      }
    }
  }
}
</style>